<script setup lang="ts">
import { onMounted, ref, computed } from "vue";
import { Icons } from "@/constants/images";
import ChoiceQuestion from "@/components/exam/ChoiceQuestion/index.vue";
import ImgQuestion from "@/components/exam/ImgQuestion/index.vue";
import GapQuestion from "@/components/exam/GapQuestion/index.vue";
import JudgeQuestion from "@/components/exam/JudgeQuestion/index.vue";
import MatchQuestion from "@/components/exam/MatchQuestion/index.vue";

import Breadcrumb from "@/components/exam/Breadcrumb/index.vue";

// import { createLoading } from "@/plugins/loading";

import { useExamStore } from "@/store/modules/exam";
import { useRouter } from 'vue-router'

const router = useRouter()
const examStore = useExamStore();

const answerContainer = ref<HTMLDivElement | null>(null);


onMounted(() => {
    // 获取URL 参数
    const query = router.currentRoute.value.query;
    const result = query.result as string;
    if (result == "correction") {
        examStore.initCorrection();
        // 设置当前题目
        examStore.setCurrentQuestionId(examStore.getQuestions[0].id);
    } else {
        examStore.initResult();
        if (
            examStore.getQuestions.length > 0 &&
            examStore.getCurrentQuestionId == ""
        ) {
            // 设置当前题目
            examStore.setCurrentQuestionId(examStore.getQuestions[0].id);
        }
    }
});

const isMobile = computed(() => {
    const viewportWidth = document.documentElement.clientWidth;
    return viewportWidth <= 768;
});
</script>

<template>
    <div class="exam-mock">
        <!-- 面包屑 和 进度 -->
        <Breadcrumb :isResult="true" />
        <!-- 答题面板 -->
        <div class="is-flex is-justify-content-space-between" :class="{
            'mt-3 mb-5': !isMobile
        }">
            <div class="card answer-box">

                <div class="answer-container" ref="answerContainer">
                    <!-- 选择题 -->
                    <ChoiceQuestion v-if="examStore.getCurrentQuestion.questionType == 1"
                        :question="examStore.getCurrentQuestion"
                        :isright="examStore.getCurrentQuestion.correct === examStore.getCurrentQuestion.userAnswer"
                        :isResult="true" />

                    <!-- 地图题 -->
                    <ImgQuestion v-if="examStore.getCurrentQuestion.questionType == 2"
                        :question="examStore.getCurrentQuestion" />

                    <!-- 填空题 -->
                    <GapQuestion v-if="examStore.getCurrentQuestion.questionType == 3"
                        :question="examStore.getCurrentQuestion" />

                    <!-- 判断题 -->
                    <JudgeQuestion v-if="examStore.getCurrentQuestion.questionType == 4"
                        :question="examStore.getCurrentQuestion" />


                    <!-- 匹配题 -->
                    <MatchQuestion v-if="examStore.getCurrentQuestion.questionType == 5"
                        :question="examStore.getCurrentQuestion"
                        :isright="examStore.getCurrentQuestion.correct === examStore.getCurrentQuestion.userAnswer"
                        :isResult="true" />
                </div>

                <!-- Pagination -->
                <div class="is-flex is-justify-content-end is-align-items-center mt-5">
                    <div class="pagination-box is-flex is-align-items-center">
                        <!-- 上一题 -->
                        <div class="last" @click="examStore.resultPrevQuestion()">
                            <span class="icon mr-2">
                                <img :src="Icons.ICON_LEFT" />
                            </span>
                            <span>上一题</span>
                        </div>
                        <div class="divider"></div>
                        <!-- 下一题 -->
                        <div class="next" @click="examStore.resultNextQuestion()">
                            <span>下一题</span>
                            <span class="icon ml-2">
                                <img :src="Icons.ICON_RIGHT" />
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <el-dialog v-model="examStore.dialogVisible" destroy-on-close center title="答题卡"
                :width="isMobile ? '100%' : '740'">
                <div class="answer-sheet">
                    <!-- 答题卡 -->
                    <div class="card">
                        <div class="is-flex is-justify-content-end is-align-items-center"
                            style="margin-bottom: 20px;gap: 20px;position: absolute;right: 30px;">
                            <div class="status-item">
                                <span class="square bg-red"></span>
                                <span>错误</span>
                            </div>
                            <div class="status-item">
                                <span class="square bg-green"></span>
                                <span>正确</span>
                            </div>
                            <div class="status-item">
                                <span class="square bg-grey"></span>
                                <span>未作答</span>
                            </div>
                        </div>
                        <div v-for="(part) in examStore.getAllData.list">
                            <div class="sheet-title">{{ part.title }}</div>
                            <div class="sheet-list">
                                <div class="columns is-gapless is-multiline is-mobile">
                                    <template v-for="(item) in part.list">
                                        <div v-if="item.questionType === 1" class="column is-one-fifth item" :class="{
            right: item.userAnswer && item.userAnswer.toLowerCase() === item.correct.toLowerCase(),
            wrong: item.userAnswer && item.userAnswer.toLowerCase() !== item.correct.toLowerCase(),
        }">
                                            <span>{{ item.id }}</span>
                                        </div>


                                        <template v-if="item.questionType !== 1">
                                            <div v-for="question in item.questionList" class="column is-one-fifth item"
                                                :class="{
            right: item.userAnswer && item.userAnswer.toLowerCase() === item.correct.toLowerCase(),
            wrong: item.userAnswer && item.userAnswer.toLowerCase() !== item.correct.toLowerCase(),
        }">
                                                <span>{{ question.id }}</span>
                                            </div>
                                        </template>

                                    </template>

                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <button class="button is-primary is-fullwidth" @click="submitAnswer">
                        提交答案
                    </button> -->
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<style lang="scss">
html {
    background-color: #f6f6f6;
}

.navbar {
    background-color: #f6f6f6;
}

.head {
    font-family: "Helvetica", "Arial", sans-serif;
    font-weight: 550;

    .breadcrumb {
        margin-bottom: 0;
    }

    .progress-box {
        color: #666;

        .icon {
            width: 17px;
            height: 20px;
            margin-right: 12px;
        }

        span {
            // 不换行
            white-space: nowrap;
        }

        .progress-bar {
            margin-left: 120px;
            width: 450px;

            .progress {
                margin-bottom: 0;
                margin-right: 30px;
                height: 8px;
            }
        }
    }
}

.exam-mock {
    padding: 50px 100px 0 100px;

    .card {
        box-shadow: none;
        padding: 30px;
        border-radius: 30px;
    }

    .answer-box {
        flex: 1;
        font-weight: bold;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        width: 100%;



        .view-btn {
            width: 180px;
            height: 54px;
            border-radius: 12px;
        }

        .pagination-box {
            background-color: #f7f7f7;
            border-radius: 12px;
            display: flex;

            .divider {
                width: 4px;
                height: 16px;
                border-radius: 2px;
                background-color: #d0d0d0;
            }

            .last,
            .next {
                display: flex;
                align-items: center;
                padding: 20px 30px;
                cursor: pointer;
                color: #14161e;
                // 禁止文字选择
                user-select: none;

                .icon {
                    width: 15px;
                }
            }
        }
    }

    // 答题卡
    .answer-sheet {

        .title {
            display: flex;
            align-items: center;
            height: 24px;
            margin-bottom: 0;
            line-height: 1;

            &::before {
                content: "";
                display: inline-block;
                width: 6px;
                height: 14px;
                border-radius: 3px;
                background-color: #00CCCF;
                margin-right: 12px;
                margin-top: 2px;
            }
        }

        .sheet-title {
            margin: 13px 0;
            font-weight: 500;
            font-size: 14px;
            color: #141623;
            line-height: 18px;
        }

        .sheet-list {
            max-height: 450px;
            width: 100%;
            overflow-y: scroll;

            // margin-right: -25px;
            &::-webkit-scrollbar {
                width: 6px;
                /* 滚动条宽度， width：对应竖滚动条的宽度 height：对应横滚动条的高度*/
                height: 4px;
                background: #ffffff;
            }

            &::-webkit-scrollbar-track {
                border-radius: 3px;
                background: transparent;
            }

            &::-webkit-scrollbar-thumb {
                border-radius: 3px;
                height: 100px;
                /* 滚动条滑块长度 */
                background: #e8e8e8;
            }

            .columns {
                gap: 10px;
                row-gap: 10px
            }
        }

        .column {
            &.item {
                width: 54px !important;
                height: 54px;
                border-radius: 12px;
                background-color: #f7f7f7;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #14161e;
                font-size: 16px;
                font-weight: bold;
                cursor: pointer;

                // 五的倍数
                &:nth-child(5n) {
                    margin-right: 0;
                }

                // 选中
                &.on {
                    background-color: #000 !important;
                    color: #fff;
                }

                &.right {
                    background-color: #00ac26;
                    color: #fff;
                }

                &.wrong {
                    background-color: #ff6464;
                    color: #fff;
                }
            }
        }

        .status-item {
            display: flex;
            align-items: center;
            color: #999;
            font-weight: bold;

            .square {
                width: 14px;
                height: 14px;
                border-radius: 4px;
                margin-right: 8px;
            }
        }

        .button {
            border-radius: 20px;
            font-weight: bold;
            height: 66px;
            font-size: 18px;
        }
    }
}

.bg-mark {
    background-color: #999;
}

@media (max-width: 768px) {
    .exam-mock {
        padding: 10px 16px;

        .card {
            padding: 0;
        }

        .answer-box {
            .pagination-box {

                .last,
                .next {
                    padding: 12px 20px;

                    span {
                        font-size: 12px;
                    }
                }
            }
        }

        .columns {
            gap: calc((100% - 270px) / 4);
            row-gap: 10px
        }
    }

    .el-dialog {
        margin: 0;
        height: 100%;

        .el-dialog__header {
            padding: 0;
        }
    }
}
</style>
